///////////////////////////////////////////////////////
var footer = document.querySelector(".footer");

var baseUrl = " https://easy-mock.com/mock/5c88d366b3f8353242f22cc4/chenYongRen";
//这个路径是我们通过 模拟数据的网站Easy Mosk https://easy-mock.com/ 模拟数据网站 创建出来的

var  img_box = document.querySelector(".img_box");
var banner_img = document.querySelector(".banner");
var boo = true;

function myAjax(){
var xhr = new XMLHttpRequest();
xhr.open("get",baseUrl+"/imgUrl",true); 
xhr.send();
xhr.addEventListener("readystatechange",()=>{
    if(xhr.readyState==4&&xhr.status==200){
        var result = JSON.parse(xhr.responseText);
        console.log(result);
        console.log(result.data[0]);
        banner_img.innerHTML+= `<img src=${result.data[0]}>`;
        for(var i = 1;i<result.data.length;i++){
            if(boo){
                img_box.innerHTML += `<li><div class="imgli big_img"><img data-src="${result.data[i][0]}"></div></li>
                                  <li>
                                        <div class="imgli small_img"><img data-src="${result.data[i][1]}"></div>
                                        <div class="imgli small_img"><img data-src="${result.data[i][2]}"></div>
                                  </li>
                                  `
                boo = false;
            }else{
                img_box.innerHTML += `<li>
                                        <div class="imgli small_img"><img data-src="${result.data[i][0]}"></div>
                                        <div class="imgli small_img"><img data-src="${result.data[i][1]}"></div>
                                      </li>
                                      <li><div class="imgli big_img"><img data-src="${result.data[i][2]}"></div></li>
                                  `
                boo = true;
            }   
        }
        var lis = document.querySelectorAll(".imgli");
        var img = document.querySelectorAll(".imgli img");
        var opc = document.querySelector(".opc");
           window.onscroll = function(){
                    console.log(1);
                    var scrollTop = document.body.scrollTop|| document.documentElement.scrollTop;
                    var windowTop = window.innerHeight;
                    var allHeight = scrollTop+windowTop;
                    for(var i = 0; i<lis.length;i++){
                        var listop = lis[i].offsetTop;
                        if(listop<allHeight){
                            img[i].src = lis[i].children[0].getAttribute("data-src");
                            img[i].classList.add("opc");
                    
                }
            }
            
        }   
    }
})        
}
myAjax(baseUrl);
var arr = [];
function ulAjax(baseUrl){
var xhr = new XMLHttpRequest(baseUrl);
xhr.open("get",baseUrl+"/liebiao",true); 
xhr.send();
xhr.addEventListener("readystatechange",()=>{
    if(xhr.readyState==4&&xhr.status==200){
        var result = JSON.parse(xhr.responseText);
        console.log(result.data[0]);
        for(var i =0; i<result.data[0].length;i++){
            arr.push(result.data[0][i]);
        }
        var li = `<li>${arr[0]}</li>
          <li>${arr[1]}</li>
          <li>${arr[2]}</li>
          <li>${arr[3]}</li>
          <li>${arr[4]}</li>`
        for(var i = 0;i<5;i++){
            footer.innerHTML += li;
        }
       
    }
})

}
ulAjax(baseUrl);